<template>
  <div class="bg">
    <nav-com
      :title="$t('guanli')"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <div class="top-view1">
      <van-cell-group inset class="m-b-10 m-t-10">
        <div class="group-item">
          <div class="group-item-top">
            <div class="group-item-left">
              <div><img src="../../assets/helpRobot/touxiang@2x.png" alt=""></div>
              <div class="management_name">{{ bickdata.bname }}</div>
            </div>

            <div class="group-item-right"><van-button plain round type="info" color="#0AD39F" size="normal" @click="showchangename=true;bickname=bickdata.bname">{{ $t('resetname') }}</van-button></div>
            <van-popup
              round
              v-model="showchangename"
              position="center"
              :style="{ height: '25%' }"
            >
              <div class="rili-content">
                <van-row  class="m-b-10 m-t-10 topContent">
                  <van-col span="24" class="fontStyle">{{ $t('changingnames') }}</van-col>
                </van-row>
                <van-cell-group inset class="m-b-10">
                  <van-field
                    style="border-bottom: 1px solid #ccc;"
                    v-model="bickname"
                    label=""
                    :placeholder="$t('changingnames')"
                    input-align="left"
                  />
                </van-cell-group>
                <div class='fatSubmit'>
                  <van-button round type="info" class="fatSubmit_yanse1" block @click="showchangename=false">{{ $t('quxiao') }}</van-button>
                  <van-button round type="info" class="fatSubmit_yanse1" block @click="submintname()">{{ $t('accomplish') }}</van-button>
                </div>
              </div>
            </van-popup>
          </div>
          <div class="group-item-content">
            <div class="group-item-content-all">
              <div class="biaoti">{{ $t('biaohao') }}</div>
              <div class="neirong">{{ bickdata.model }}</div>
            </div>
            <div class="group-item-content-all">
              <div class="biaoti">{{ $t('kexingshilicheng') }}</div>
              <div class="neirong">{{ bickdata.canmileage }}</div>
            </div>
            <div class="group-item-content-all">
              <div class="biaoti">{{ $t('zonglicheng') }}</div>
              <div class="neirong">{{ bickdata.totalmileage!=null?bickdata.totalmileage:'0' }}</div>
            </div>


            <div class="group-item-content-all">
              <div class="biaoti">{{ $t('juli') }}</div>
              <div class="neirong">{{ bickdata.totalmileage!=null?bickdata.totalmileage:'0' }}</div>
            </div>
<!--            <div class="group-item-content-all">-->
<!--              <div class="biaoti">{{ $t('chelunzhijing') }}</div>-->
<!--              <div class="neirong">{{ bickdata.diameter!=null?bickdata.diameter:'0' }}M</div>-->
<!--            </div>-->
            <div class="group-item-content-all" style="margin-bottom: 15px">
              <div class="biaoti">{{ $t('lianjieshijian') }}</div>
              <div class="neirong">{{ bickdata.connectiontime }}</div>
            </div>
            <div class="group-item-content-all">
              <img v-if="bickdata.image" @click="openmodelphoto()" :src="bickdata.image?bickdata.image:require('../../assets/helpRobot/5fc4-hqnkypr6945773@2x.png')" alt="">
              <van-row v-else class="item-content"  justify="center" align="center" @click="addcarsphoto()">
                <van-col span="24" style="display: flex;justify-content: center"><img src="../../assets/helpRobot/saoyisao@2x.png" alt="" class="icons_add"></van-col>
                <van-col span="24" style="display: flex;justify-content: center">
                  <div class="item-content-all">
                    <div class="item-content-all-title">{{ $t('addphoto') }}</div>
                  </div>
                </van-col>
              </van-row>
            </div>
            <div  class='fatSubmit'>
              <van-button round type="info" class="fatSubmit_yanse" block @click="ubind(bickdata.userbdid)">{{ bickdata.binding?$t('jiechubind'):$t('yichu') }}</van-button>
            </div>
          </div>
        </div>
      </van-cell-group>
      <van-dialog v-model="deletmodel" :title="$t('unbindtitle')" show-cancel-button @confirm="deletbick" @cancel="cancel" :confirm-button-text="$t('sure')" :cancel-button-text="$t('close')">
      </van-dialog>
      <van-dialog v-model="openphoto" :title="$t('changphoto')" show-cancel-button @confirm="changePhoto" @cancel="cancelPhoto" :confirm-button-text="$t('sure')" :cancel-button-text="$t('close')">
      </van-dialog>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import navCom from '@/components/nav-com.vue'
import { bdetail, removebundling, rename, unbundling } from '../../api/deviceManagement'
export default {
  name: 'bonusList',
  components: {
    navCom
  },
  data () {
    return {
      bickname: '',
      showView: true,
      title: '设备管理',
      bickdata: {},
      showchangename: false,
      deletmodel: false,
      unbindbickId: '',
      openphoto: false
    }
  },
  mounted () {
    this.equipmentid = this.$route.query.canshu
    this.init()
    let _this = this
    // 根据自己需要来监听对应的key
    window.addEventListener('setItemEvent', function (e) {
      // e.key : 是值发生变化的key
      // e.newValue : 是可以对应的新值
      if (e.key === 'goChangeimage') {
        console.log(e.newValue)
        if (e.newValue) {
          _this.getdetail()
          localStorage.removeItem('goChangeimage')
        }
      }
    })
  },
  onHide () {
  },
  methods: {
    addcarsphoto () {
      const nav = navigator.userAgent
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.addcarsphoto(this.equipmentid)
      } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('addcarsphoto', { id: this.equipmentid }, res => {})
      }
    },
    changePhoto () {
      this.addcarsphoto()
    },
    cancelPhoto () {
      this.openphoto = false
    },
    openmodelphoto () {
      this.openphoto = true
    },
    jumpTo (url) {
      this.$router.push(url)
    },
    onPageConfirm () {

    },
    // 返回
    backHandler () {
      if(localStorage.getItem('parentRouter')){
        this.$router.replace(localStorage.getItem('parentRouter'))
        localStorage.removeItem('parentRouter')
      }else{
        const nav = navigator.userAgent
        if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
          phone.onBackPress()
        } else if (nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
          this.$bridge.callhandler('onBackPress', {}, res => {})
        } else {
          this.$router.go(-1)
        }
      }
    },
    // 初始化
    init () {
      this.getdetail()
    },
    getdetail () {
      bdetail({ equipmentid: this.equipmentid }).then((res) => {
        if (res.code == 1) {
          this.bickdata = res.data.detail
        }
      })
    },
    ubind (id) {
      // if (type == '1') {
      //   unbundling({ id: id }).then((res) => {
      //     if (res.code == 1) {
      //       if (this.$i18n.locale == 'zh') {
      //         this.$toast('解绑成功')
      //       } else {
      //         this.$toast('Untying is successfull')
      //       }
      //       this.dataList = []
      //       this.page = 1
      //       this.init()
      //     }
      //   })
      // } else {
      this.deletmodel = true
      this.unbindbickId = id
      // }
    },
    cancel () {
      this.deletmodel = false
    },
    deletbick () {
      removebundling({ id: this.unbindbickId }).then((res) => {
        if (res.code == 1) {
          if (this.$i18n.locale == 'zh') {
            this.$toast('移除成功')
          } else {
            this.$toast('Successful removal')
          }
          this.dataList = []
          this.page = 1
          this.backHandler()
        }
      })
    },
    submintname () {
      rename({ id: this.bickdata.userbdid, bname: this.bickname }).then((res) => {
        if (res.code == 1) {
          if (this.$i18n.locale == 'zh') {
            this.$toast('修改成功')
          } else {
            this.$toast('Changed')
          }
          this.showchangename = false
          this.init()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.rili-content{
  width: 90vw;
  background: #fff;
}
.top-view1{
  margin-top: 26.23vw;
}
.m-b-10{
  margin-bottom: 10px;
}
.m-t-10{
  margin-top: 10px;
}
.van-cell__title, .van-cell__value {
  flex: 1;
  display: flex;
  align-items: center;
}
.group-item{
  display: flex;
  flex-direction: column;
  padding: 15px;
  .group-item-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 0.02667rem solid #ebedf0;
    .group-item-left{
      flex: 2;
      display: flex;
      align-items: center;
      img{
        width: 40px;
        margin-right: 20px;
      }
      .management_name{
        font-size: 22px;
        font-family: Helvetica;
        color: #303030;
        width: 160px;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .group-item-right{
      flex: 1;
      display: flex;
      justify-content: flex-end;
      .van-button{
        height: 35px;
      }
    }
  }
  .group-item-content{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .group-item-content-all{
      width:100%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      &:first-child{
        margin-top: 10px;
      }
      .biaoti{
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #808080;
        margin-right: 10px;
      }
      .neirong{
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #303030;
      }
      img{
        width: 100%;
      }
    }
    .fatSubmit{
      padding: 0.3rem 0.42667rem 10px;
      width: 100%;
      .fatSubmit_yanse{
        border: 0px!important;
        background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
        box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
        font-size: 18px!important;
      }

    }
  }
}
.fatSubmit{
  padding: 0.3rem 0.42667rem 10px;
  display: flex;
  justify-content: space-between;
  .fatSubmit_yanse1{
    margin-top: 20px;
    width: 48%;
    border: 0px!important;
    background: linear-gradient(90deg, #1ED6C2 0%, #00DEA1 100%);
    box-shadow: 0px 2px 4px 0px rgba(10,211,159,0.3);
    font-size: 18px!important;
  }

}
.fontStyle{
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color:#303030;
  text-align: center;
}
.item-content{
  width: 95%;
  .contentsimg{
    width: 84px;
    height: 84px;
    .icons{
      width: 100%;
      height: 100%;
    }
  }
  .icons_add{
    width: 50px!important;
  }
  .teshu{
    height: 88px;
    margin-left: 5px;
    .item-content-all{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      height: 100%;
      .item-content-all-title{
        width: 100%;
        text-align: left;
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .item-content-all-subtitle{
        width: 100%;
        text-align: left;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #808080;
      }
    }
  }
}
</style>
